<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="列表"></fa-navbar>
		<view class="u-bg-white" v-if="is_show"><fa-orderby :tabList="orderList" :filterList="filterList" showField="title" @change="goOrderBy"></fa-orderby></view>
		<view class="u-p-30">
			<view class="form-list">
				<view class="item u-border-top u-p-30 u-bg-white" v-for="(item, index) in list" :key="index" @click="goDetail(item.id)">
					<view class="u-m-b-10 u-text-weight title"><text v-text="item.title?item.title:item.name"></text></view>
					<view class="u-line-3 u-tips-color">
						{{item.content}}
					</view>
					<view class="u-flex u-flex-wrap u-m-t-30">

						<block v-if="item.images">
							<view :class="item.images.length==1?'image':'images'" v-for="(res,ik) in item.images" :key="ik">
								<u-image width="100%" height="100%" :src="res"></u-image>
							</view>
						</block>
						<block v-else>
							<view :class="item.image.length==1?'image':'images'" v-for="(res,ik) in item.image" :key="ik">
								<u-image width="100%" height="100%" :src="res"></u-image>
							</view>
						</block>
					</view>
					<view class="u-flex u-font-28">{{item.createtime | timeFrom}}</view>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-b-30" v-if="list.length"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		<!-- 空数据 -->
		<view class="fa-empty" v-if="!list.length"><u-empty></u-empty></view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: lightColor }"></u-back-top>
		<!-- 发布留言 -->
		<fa-add :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: lightColor }" @click="publish"></fa-add>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
export default {
	onLoad(e) {
		this.diyname = e.diyname || this.$Route.query.diyname || '';
		this.getformList();
	},
	data() {
		return {
			diyname: '',
			is_update: false,
			orderby: '',
			orderway: '',
			scrollTop: 0,
			list: [],
			status: 'loadmore',
			has_more: false,
			page: 1,
			orderList: [],
			filterList: [],
			url: '',
			is_show:false
		};
	},
	methods: {
		getformList() {
			let data = {
				page: this.page,
				diyname: this.diyname
			};
			if (this.orderby) {
				data.orderby = this.orderby;
			}
			if (this.orderway) {
				data.orderway = this.orderway;
			}
			let path = this.$u.queryParams(data);
			this.$api.formList(path+this.url).then(res => {
				console.log(res)
				if (res.code) {
					if (this.is_update) {
						this.list = [];
						this.is_update = false;
					}
					this.orderList = res.data.orderList;					
					if (!this.filterList.length) {
						this.filterList = res.data.filterList;
					}
					this.list = [...this.list, ...res.data.pageList.data];					
					this.is_show = true;
				} else {
					this.$u.toast(res.msg);
				}
			});
		},
		goOrderBy(e) {
			console.log(e)
			if(e.orderby=='' && e.orderway=='' && e.url==''){
				return;
			}
			this.orderby = e.orderby;
			this.orderway = e.orderway;
			this.url = e.url;
			this.page = 1;
			this.is_update = true;
			this.getformList();
		},
		goDetail(id) {
			this.$Router.push({
				path: '/pages/diyform/detail',
				query: { id: id, diyname: this.diyname }
			});
		},
		publish() {
			this.$Router.push({
				path: '/pages/diyform/diyform',
				query: { diyname: this.diyname }
			});
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getformList();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
.form-list {
	width: 100%;
	box-shadow: 0 0 5rpx rgba(0, 134, 243, 0.1);
	border-radius: 5rpx;
	.item {
		margin-bottom: 2rpx;
		.images {
			width: 30%;
			height: 200rpx;
			padding-bottom: 30rpx;
			&:nth-child(3n-1) {
				margin-left: 30rpx;
				margin-right: 30rpx;
			}
		}
		.image{
			width: 100%;
			height: 300rpx;
			padding-bottom: 30rpx;
			image{
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
